<template>
<div>
  <el-card>
    <div style="margin-bottom:10px;">
    <el-row :gutter="24">
      <el-col :md="12" :lg="8">
        <el-checkbox-group v-model="checkType" size="large" @change="handleChange">
        <el-checkbox-button v-for="item in types" :key="item.value" :label="item.value">
          {{ item.label }}
        </el-checkbox-button>
      </el-checkbox-group>
      </el-col>
      <el-col :md="12" :lg="8">
        <el-button type="primary" @click="handleSearch" size="large">搜索</el-button>
      </el-col>
    </el-row>
      
    </div>
   <XTable
   :table-data="tableData"
   :columns="tableColumn"
   :options="options"
   v-loading="loading"
   @selection-change="handleSelection"
   @command="handleAction"
   @pagination-change="paginationChange"
   >
   <template #name="{row}">
   <div v-for="hero in getHero(row)" class="item">
     <img v-if="hero" :src="ChampionImg+hero.alias+'.png'" alt="">
     <span>{{hero.name}}</span>
   </div>
   </template>
   </XTable>
  </el-card>
</div>
  
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, toRefs, unref } from 'vue'
import { getRankDouble, getHeroList, ChampionImg } from '@/api/user'
import { tableColumn } from './index.data'
import XTable from '@/components/Table/index.vue';

const loading = ref(false);
const tableData = ref([]);
const heroList = ref([]);
onMounted(async () => {
  let heroRes = await getHeroList();
  heroList.value = heroRes?.hero;
  loadData()
})

const types = [
{ value:"top", label:'上路'},
{ value:"mid", label:'中路'},
{ value:"jungle", label:'打野'},
{ value:"support", label:'辅助'},
{ value:"bottom", label:'下路'}
];

const checkType = ref(["support","bottom"]);
// 多选框值的改变
const handleChange = (value: any[])=>{
  let check = checkType.value;
  if(value.length>2){
    check.shift()
  }
}

const state = reactive({
  options: { 
  showPagination:true, 
  paginationConfig: {
    currentPage:1,
    pageSize:10,
    total:0
  },
  }
})
const toDayFormat = new Date().toLocaleDateString().split('/').map(item=>item.padStart(2,'0')).join('')
const params = reactive({
  championid: '',
  date: toDayFormat,
  tier: 200,
  lane1:"support",
  lane2:"bottom",
  pagesize: 10,
  pageindex: 1,
})
const handleSearch = ()=>{
  loadData(1)
}
const loadData = async (arg: number | undefined = undefined)=>{
  loading.value = true;
  if(arg){
    state.options.paginationConfig.currentPage = 1
  }
  let currentPage = state.options.paginationConfig.currentPage;
  let pageSize = state.options.paginationConfig.pageSize;
  params.pageindex = currentPage;
  params.pagesize = pageSize;
  params.lane1 = unref(checkType)[0]
  params.lane2 = unref(checkType)[1]

  
  let res = await getRankDouble(params);
  tableData.value = res.data;
  if(res.data.length==0){
    state.options.paginationConfig.total = 0;
  }else{
    state.options.paginationConfig.total = params.tier;
  }
  loading.value = false;
}
const paginationChange = (currentPage:number,pageSize:number)=>{
  state.options.paginationConfig.currentPage = currentPage;
  state.options.paginationConfig.pageSize = pageSize;
  loadData();
}
const handleSelection = (val:any) => {
  console.log('父组件接收的多选数据', val)
}

const handleAction = (command:Table.command, row:any) => {
  console.log(command,row);
}

const { options } = toRefs(state)

// 获取英雄对应信息
const getHero = (row:any) => {
  let hero1:any = heroList.value.find(item=>item.heroId == row.championid1);
  let hero2:any = heroList.value.find(item=>item.heroId == row.championid2);
  return [hero1,hero2]
}
</script>

<style scoped>
.item{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.item:first-child{
  margin-bottom:15px;
}
.item img{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
</style>